import { useSetState } from 'ahooks';
import { Image, Modal } from 'antd';
import cn from 'classnames';
import type { DesktopCapturerSource } from 'electron';

import store from '@/store';

import styles from './index.less';
interface Props {
  visible: boolean;
  onCancel?: () => void;
  onOk?: (win: DesktopCapturerSource) => void;
}
interface State {
  recordConfirm: boolean;
  selectedWindow: DesktopCapturerSource;
  currentRecorder: MediaRecorder;
  screenList: DesktopCapturerSource[];
}
export interface RecorderRef {
  stopRecord: () => void;
}
const Index = (props: Props) => {
  const defaultState = {
    recordConfirm: false,
    screenList: [],
    selectedWindow: {} as DesktopCapturerSource,
    currentRecorder: {} as MediaRecorder
  };
  const { visible, onOk, onCancel } = props;
  const [state, setState] = useSetState<State>(defaultState);
  const { selectedWindow } = state;

  return (
    <>
      <Modal
        maskClosable={false}
        title="选择窗口"
        open={visible}
        onCancel={onCancel}
        getContainer={document.getElementById('app-main') || document.body}
        onOk={() => {
          onOk?.(selectedWindow);
        }}
        cancelText="取消"
        okText="确定"
      >
        {/* <Tabs onChange={() => {}} type="card" items={tabs} /> */}
        <div className={styles.window}>
          {store.windowList.map((win) => {
            return (
              <div
                onClick={() => {
                  setState({ selectedWindow: win });
                }}
                key={win.id}
              >
                <div
                  className={cn(
                    styles.windowShotSnap,
                    selectedWindow.id === win.id && styles.selectedWindow
                  )}
                >
                  <Image src={win.thumbnail.toDataURL()} preview={false} />
                </div>

                <div className={styles.windowName}>{win.name}</div>
              </div>
            );
          })}
        </div>
      </Modal>
    </>
  );
};

export default Index;
